<template>
  <view class="">
    <view class="header"></view>
    <view class="main">
      <view class="vipBox">
        <view class="left">
          <view class="title">
            <text>商务VIP</text>
            <image src="../../static/home/hg.png" mode="scaleToFill" />
          </view>
          <view class="dkt">{{ isOpen === "0" ? "待开通" : isOpen === "1" ? "已开通" : "" }} </view>
          <view v-if="isOpen !== '0'" style="font-size: 26rpx">到期时间：{{ vipValidDate }}</view>
        </view>
        <image class="right" src="../../static/my/hy.png" mode="scaleToFill" />
      </view>
      <!-- <view class="packList">
        <view :class="{ pack: true, active: packActive === item.num }" @click="packClick(item.num)" v-for="(item, index) in packageList" :key="index">
          <view class="topBox">
            <view class="title">{{ item.num }}次</view>
            <view class="price">
              <text>￥</text>
              {{ item.totalPrice }}
            </view>
            <view class="des">{{ item.des }}</view>
          </view>
          <view class="priceBox">低至 {{ item.price }} 元/天 </view>
        </view>
      </view> -->
      <view class="smBox">
        <view class="title">会员权益</view>
        <view class="ctn">
          <view class="tr">
            <view class="td">第一阶段权益内容</view>
            <view class="td">会员用户</view>
            <view class="td">普通用户</view>
          </view>
          <view class="tr">
            <view class="td">VIP标识</view>
            <view class="td">有</view>
            <view class="td">无</view>
          </view>
          <view class="tr">
            <view class="td">开通费用</view>
            <view class="td"
              >360/年
              <!-- <view class="tip">（后台可设置金额）</view> -->
            </view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">发布信息</view>
            <view class="td">可发布信息</view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">查看热门动态</view>
            <view class="td"
              >可查看信息
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
            <view class="td"
              >最多可查看3条
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
          </view>
          <view class="tr">
            <view class="td">工厂入驻</view>
            <view class="td"
              >可入驻工厂
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">查看工厂信息</view>
            <view class="td"
              >可查看工厂
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">查看最近访客</view>
            <view class="td">有</view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">查看名片</view>
            <view class="td"
              >有
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
            <view class="td"
              >3次/天
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
          </view>
          <view class="tr">
            <view class="td">名片交换</view>
            <view class="td"
              >有
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
            <view class="td"
              >3次/天
              <!-- <view class="tip">（后台可设置次数）</view> -->
            </view>
          </view>
          <view class="tr">
            <view class="td">提高曝光</view>
            <view class="td">有</view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">搜索优先</view>
            <view class="td">有</view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td" style="font-size: 24rpx">分享成为会员赚佣金</view>
            <view class="td"
              >30%
              <!-- <view class="tip">（后台可设置金额）</view> -->
            </view>
            <view class="td">0</view>
          </view>
          <view class="tr">
            <view class="td">提现功能</view>
            <view class="td"
              >实名认证可提现
              <!-- <view class="tip" style="font-size: 20rpx">（后台可设置数值范围）</view> -->
            </view>
            <view class="td">0</view>
          </view>
        </view>
      </view>
      <view class="buttomBox" v-if="isOpen == '0'">
        <view>
          <view class="price">
            合计：<text class="unit">￥</text><text class="num">{{ price }}</text>
          </view>
          <u-checkbox-group v-model="checkboxValue" active-color="#1676fd" shape="circle" placement="column">
            <view class="radioBox">
              <u-checkbox label="请阅读同意" name="1"> </u-checkbox>
              <text class="xfxy" @click="goPage('/pages/myPage/membershipAgreement')">《会员增值服务协议》</text>
            </view>
          </u-checkbox-group>
        </view>
        <view class="btn" @click="submitOrder">立即开通</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { configKey, openVip } from "@/api/my";
import { onMounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";

const packActive = ref<any>("20");
const packageList = ref([
  {
    num: "20",
    totalPrice: "30",
    des: "一个月有效期",
    price: "3.5",
  },
  {
    num: "40",
    totalPrice: "30",
    des: "一个月有效期",
    price: "3.5",
  },
  {
    num: "100",
    totalPrice: "30",
    des: "一个月有效期",
    price: "3.5",
  },
]);
const price = ref();
const isOpen = ref();
const vipValidDate = ref();
onMounted(async () => {
  const res = await configKey("vip_price");
  price.value = res.data;
  isOpen.value = uni.getStorageSync("userInfo").level;
  vipValidDate.value = uni.getStorageSync("userInfo").vipValidDate;
});
const packClick = (data: any) => {
  packActive.value = data;
};
const checkboxValue = ref();

const submitOrder = async () => {
  if (checkboxValue.value && checkboxValue.value[0] === "1") {
    try {
      const res = await openVip();
      let orderInfo: any = res.data;
      uni.requestPayment({
        provider: "wxpay",
        orderInfo,
        ...orderInfo,
        success(res: any) {
          if (res.errMsg == "requestPayment:ok") {
            uni.showToast({
              title: "购买成功",
              icon: "success",
              complete: () => {
                setTimeout(() => {
                  uni.switchTab({
                    url: "/pages/myPage/myPage",
                  });
                }, 600);
              },
            });
          }
        },
        fail() {
          uni.showToast({
            title: "购买失败",
            icon: "error",
          });
        },
      });
    } catch (error: any) {}
  } else {
    uni.showToast({
      title: "请勾选续费协议",
      icon: "none",
    });
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 200rpx;
  width: 100%;
  border-radius: 0 0 40rpx 40rpx;
  background: #1676fd;
}
.main {
  margin-top: -210rpx;
}
.vipBox {
  background: #f8faff;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(191, 201, 234, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 32rpx;
  margin-bottom: 48rpx;
  .left {
    padding: 48rpx 0;
    padding-left: 48rpx;
    .title {
      font-size: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #1e1e1e;
      line-height: 66rpx;
      display: flex;
      align-items: center;
      image {
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
      }
    }
    .dkt {
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #1676fd;
      line-height: 40rpx;
      margin-top: 38rpx;
    }
  }
  .right {
    width: 236rpx;
    height: 238rpx;
    margin-bottom: 20rpx;
    margin-right: 50rpx;
  }
}
.packList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pack {
    background: #ffffff;
    border-radius: 16rpx;
    border: 4rpx solid #f7f7f7;
    transition: background 0.2s;

    .topBox {
      padding: 26rpx 36rpx;
      text-align: center;
      .title {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #1e1e1e;
        line-height: 40rpx;
      }
      .price {
        font-size: 48rpx;
        font-family: DINPro, DINPro;
        font-weight: 500;
        color: #333333;
        line-height: 40rpx;
        margin-top: 20rpx;
        text {
          font-size: 30rpx;
        }
      }
      .des {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #bebebe;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
    .priceBox {
      background: #f2f2f2;
      box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(201, 205, 216, 0.5);
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      padding: 16rpx 28rpx;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #a8a8a8;
      line-height: 34rpx;
    }
  }
  .active {
    transition: background 0.2s;
    background: #f3f8ff;
    border: 1rpx solid #1676fd;
    .priceBox {
      background: #1676fd;
      color: #fff;
    }
  }
}
.smBox {
  margin-top: 34rpx;
  margin-bottom: 130rpx;
  .title {
    font-size: 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    margin-bottom: 10rpx;
  }
  .ctn {
    font-size: 26rpx;
    color: #595959;
    line-height: 32rpx;
  }
}
.buttomBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .price {
    font-size: 26rpx;
    font-family: DINPro, DINPro;
    font-weight: 400;
    color: #333333;
    line-height: 34rpx;
    margin-bottom: 10rpx;
    .unit {
      color: #fe5100;
    }
    .num {
      color: #fe5100;
      font-size: 40rpx;
    }
  }
  .radioBox {
    display: flex;
    align-items: center;
    .xfxy {
      font-size: 30rpx;
      color: #1676fd;
    }
  }
  .btn {
    background: #1676fd;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    padding: 18rpx 30rpx;
    margin-left: 20rpx;
  }
}
.tr {
  display: flex;
  &:first-of-type {
    border-top: 1px solid #000;
  }
  .td {
    width: 33%;
    border: 1px solid #000;
    border-right: none;
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15rpx 0;
    &:last-of-type {
      border-right: 1px solid #000;
    }
    .tip {
      font-size: 24rpx;
      color: #b33b49;
    }
  }
}
</style>
